<template>
    <div class="container mt-5">
      <div class="collapse-card">
        <div
          class="collapse-header d-flex align-items-center"
          data-bs-toggle="collapse"
          href="#collapseExample"
          aria-expanded="false"
          aria-controls="collapseExample"
        >
          <div class="collapse-dot-line me-3">
            <div class="collapse-dot"></div>
          </div>
          <h5 class="mb-0">点击展开图片信息</h5>
        </div>
  
        <div class="collapse" id="collapseExample">
          <div class="card card-body mt-2">
            <div class="collapse-image mb-3">
              <img src="https://via.placeholder.com/600x200" alt="示例图片" class="img-fluid" />
            </div>
  
            <div class="border rounded p-3 mb-3">
              <div class="bg-light border-bottom pb-2 mb-2">图片描述</div>
              <p>这是一个示例图片的描述信息，用于展示折叠内容的布局和样式。</p>
            </div>
  
            <div class="border rounded p-3">
              <div class="bg-warning-subtle border-bottom pb-2 mb-2">图片OCR</div>
              <p>OCR识别内容：这是从图片中提取的文本信息示例。</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  // 无需 JS 逻辑，Bootstrap 自动处理 collapse 交互
  </script>
  
  <style scoped>
  .collapse-header {
    cursor: pointer;
    padding: 10px 0;
  }
  
  .collapse-dot-line {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
  }
  
  .collapse-dot {
    width: 8px;
    height: 8px;
    background-color: #007bff;
    border-radius: 50%;
    position: relative;
    z-index: 1;
  }
  
  /* 展开后显示蓝色竖线 */
  .collapse.show ~ .collapse-header .collapse-dot-line::before {
    content: '';
    position: absolute;
    left: 3.5px;
    top: 12px; /* 从圆点下方开始 */
    bottom: -20px; /* 延伸到下方 */
    width: 2px;
    background-color: #007bff;
  }
  </style>